<template>
  <nav-bar>
    <img
      slot="left"
      class="back"
      src="~assets/img/common/back.svg"
      alt=""
      @click="backButton"
    />
    <div slot="mid" class="title">
      <div
        v-for="(item, index) in titles"
        :key="item.title"
        @click="titleClick(index)"
        :class="{ active: currentIndex === index }"
        class="title-item"
      >
        {{ item }}
      </div>
    </div>
  </nav-bar>
</template>

<script>
import NavBar from "../../../components/common/navbar/NavBar.vue";
export default {
  components: { NavBar },
  name: "DetaiItem",
  props: {
    titles: {
      type: Array,
      default() {
        return ["商品", "参数", "评论", "推荐"];
      },
    },
    // currentIndex: {
    //   type: Number,
    //   default: 0,
    // },
  },
  data() {
    return {
      currentIndex: 0,
    };
  },
  methods: {
    titleClick(index) {
      // console.log(index);
      this.currentIndex = index;
      this.$emit("titleClick", index);
    },
    backButton() {
      this.$router.back();
    },
  },
};
</script>

<style scoped>
.back {
  margin-top: 12px;
}

.title {
  display: flex;
  padding: 0 20px;
}

.title-item {
  flex: 1;
  font-size: 14px;
}

.title-item.active {
  color: var(--color-high-text);
}
</style>